<template>
  <!-- 视频卡片组件 -->
  <v-card :href="baseInfo.url" v-ripple>
    <div class="card-header">
      <div>
        <img class="card-img" :src="baseInfo.imgUrl" alt="视频封面" />
        <!-- 图片上加一层遮罩阻止弹出移动端图片分享菜单 -->
        <div class="card-img-cover"></div>
      </div>
      <!-- 播放量、弹幕数显示 -->
      <slot name="vedio-info">
        <div class="header-tips">播放量？弹幕数量？</div>
      </slot>
    </div>
    <div class="card-label">{{ baseInfo.label }}</div>
    <div class="card-footer">
      <slot name="card-footer-info"></slot>
      <span class="more" color="blue" dark>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zhiwei-quanbuzhiwei" />
        </svg>
      </span>
    </div>
  </v-card>
</template>

<script>
export default {
  name: "CustomCard",
  props: {
    baseInfo: {
      type: Object,
      default() {
        return {
          url: "https://www.bilibili.com/video/BV1Zp4y1Y7Q2/",
          imgUrl:
            "https://gitee.com/assd12138/cdnpics/raw/master/img/b564d156484149869062ab1df361e0f2b4dc3136.jpg",
          label: "数量激增！业界复苏！2020年十月新番导视！"
        };
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.card-header
  display block
  position inherit
  .header-tips
    width 100%
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3))
    display flex
    position absolute
    bottom 0
  .card-img
    display block
    width 100%
    -webkit-touch-callout: none;
    pointer-events: none;
  .card-img-cover
    width 100%
    height 100%
    position absolute
    top 0
    left 0
    z-index 1
    pointer-events auto
.card-label
  font-size .8rem
  font-weight 600
  line-height 19px
  display -webkit-box
  height 2.4rem
  margin .4rem .5rem
  -webkit-box-orient vertical
  overflow hidden
  -webkit-line-clamp 2 /* 最多显示两行 */
.card-footer
  display flex
.more
  border 1px solid red
  align-items center
  margin-left auto
  margin-bottom .3rem
  color rgb(204,204,204)
</style>
